<div class="inner" id="properties" ng-init="types=['x', 'y']; orient=['top', 'bottom', 'left', 'right']; layer=['front', 'back'];">
  <h4>Axis</h4>

  <vde-property label="Scale" type="scale" item="axis" property="scale"
                ng-model="axis.properties.scale"
                scale="axis.properties.scale" transclude="1"
                can-drop-style="left" style="full">

    <!--<p ng-show="axis.pipeline().forkName" style="margin-top: 5px">-->
      <!--<label><input type="checkbox" ng-model="axis.onceAcrossForks"-->
                    <!--ng-click="reparse()" /> Show axis only once</label>-->
    <!--</p>-->
  </vde-property>

  <br clear="all" />

  <vde-property label="Type" type="radio" options="types" item="axis"
                property="type" ng-model="axis.properties.type"
                nodrop="1" style="half"></vde-property>

  <vde-property label="Orient" type="select" options="orient"
                item="axis" property="orient" ng-model="axis.properties.orient"
                nodrop="1" style="half"></vde-property>

  <div ng-show="axis.properties.type">
    <br clear="all" />

    <vde-property label="Color" type="color" item="axis"
                  property="axisStyle.stroke"
                  ng-model="axis.properties.axisStyle.stroke.value"
                  nodrop="1" style="full"></vde-property>

    <vde-property label="Width" type="range" min="0" step="0.25" max="10"
                  item="axis" property="axisStyle.strokeWidth"
                  ng-model="axis.properties.axisStyle.strokeWidth.value"
                  nodrop="1" style="full"></vde-property>

    <h4>Title</h4>

    <vde-property label="Title" type="text" item="axis" property="title"
                  ng-model="axis.properties.title" nodrop="1" style="half"></vde-property>

    <br clear="all" ng-hide="axis.properties.title" />

    <div ng-show="axis.properties.title">
      <vde-property label="Offset" type="number" item="axis"
                    property="titleOffset" nodrop="1" style="half"
                    ng-model="axis.properties.titleOffset" ></vde-property>

      <br clear="all"/>

      <vde-property label="Font" type="font" item="axis" property="titleStyle"
                    ng-model="axis.properties.titleStyle" nodrop="1" style="full"></vde-property>

      <br clear="all" />

      <vde-property label="Weight" item="axis" property="titleStyle"
                    ng-model="axis.properties.titleStyle.fontWeight.value" style="half">
        <a class="btn btn-mini" ng-click="toggleProp('titleStyle.fontWeight', 'bold')"
           ng-class="{'btn-info': axis.properties.titleStyle.fontWeight.value == 'bold'}"><i class="icon-bold"></i></a>
      </vde-property>

      <vde-property label="Style" item="axis" property="titleStyle"
                    ng-model="axis.properties.titleStyle.fontStyle.value" style="half">
        <a class="btn btn-mini" ng-click="toggleProp('titleStyle.fontStyle', 'italic')"
           ng-class="{'btn-info': axis.properties.titleStyle.fontStyle.value == 'italic'}"><i class="icon-italic"></i></a>
      </vde-property>

      <br clear="all" />

      <vde-property label="Color" type="color" item="axis"
                    property="axisStyle.fill" nodrop="1" style="full"
                    ng-model="axis.properties.titleStyle.fill.value" ></vde-property>
    </div>

    <h4>Ticks</h4>

    <vde-property label="Number of Ticks" type="number" item="axis" property="ticks"
                  ng-model="axis.properties.ticks" nodrop="1" style="half"></vde-property>

    <vde-property label="Size" type="number" item="axis" property="tickSize"
                  ng-model="axis.properties.tickSize" nodrop="1" style="half"></vde-property>

    <br clear="all" />

    <vde-property label="" type="checkbox" item="axis" property="tickValues"
                  ng-model="axis.properties.tickValues" nodrop="1" style="full"
                  hint="Explicitly set visible tick values"></vde-property>

    <div ng-if="axis.properties.tickValues">
      <vde-property label="Values" transclude="1" style="full">
        <vde-scale-values type="text" scale="axis" property="values" ng-model="axis.values"></vde-scale-values>
      </vde-property>
    </div>

    <br clear="all" />

    <vde-property label="Color" type="color" item="axis"
                  property="tickStyle.stroke" nodrop="1"
                  ng-model="axis.properties.tickStyle.stroke.value" style="full"></vde-property>

    <vde-property label="Width" type="range" min="0" step="0.25" max="10"
                  item="axis" property="tickStyle.strokeWidth"
                  ng-model="axis.properties.tickStyle.strokeWidth.value"
                  nodrop="1" style="full"></vde-property>

    <h4>Labels</h4>

      <vde-property label="Custom Text" type="scale" item="axis" property="labelStyle.text.scale"
                  ng-model="axis.properties.labelStyle.text.scale"
                  scale="axis.properties.labelStyle.text.scale" transclude="1"
                  can-drop-style="left" style="full"></vde-property>

      <br clear="all" />

      <vde-property label="Font" type="font" item="axis" property="labelStyle"
                  ng-model="axis.properties.labelStyle" nodrop="1" style="full"></vde-property>


      <br clear="all" />

      <vde-property label="Weight" item="axis" property="labelStyle"
                    ng-model="axis.properties.labelStyle.fontWeight.value" style="half">
        <a class="btn btn-mini" ng-click="toggleProp('labelStyle.fontWeight', 'bold')"
           ng-class="{'btn-info': axis.properties.labelStyle.fontWeight.value == 'bold'}"><i class="icon-bold"></i></a>
      </vde-property>

      <vde-property label="Style" item="axis" property="labelStyle"
                    ng-model="axis.properties.labelStyle.fontStyle.value" style="half">
        <a class="btn btn-mini" ng-click="toggleProp('labelStyle.fontStyle', 'italic')"
           ng-class="{'btn-info': axis.properties.labelStyle.fontStyle.value == 'italic'}"><i class="icon-italic"></i></a>
      </vde-property>

      <br clear="all" />

      <vde-property label="Angle" type="number" min="-360" max="360"
                    item="axis" property="labelStyle.angle" nodrop="1"
                    ng-model="axis.properties.labelStyle.angle.value" style="half"></vde-property>

    <vde-property label="Format" type="text" hint-url="https://github.com/mbostock/d3/wiki/Formatting"
                  item="axis" property="format" nodrop="1"
                  ng-model="axis.properties.format" style="half"></vde-property>

      <br clear="all" />

      <vde-property label="Fill" type="color" item="axis"
                  property="labelStyle.fill"
                  ng-model="axis.properties.labelStyle.fill.value"
                  nodrop="1" style="full"></vde-property>

    <h4>Grid Lines</h4>

    <vde-property label="Show" type="checkbox" item="axis" property="grid"
                  ng-model="axis.properties.grid" nodrop="1" style="half"></vde-property>

    <vde-property label="Layer" type="select" options="layer" item="axis"
                  property="layer" ng-model="axis.properties.layer"
                  nodrop="1" style="half"></vde-property>

    <br clear="all" />

    <div ng-show="axis.properties.grid">
      <vde-property label="Color" type="color" item="axis"
                    property="gridStyle.stroke" style="full"
                    ng-model="axis.properties.gridStyle.stroke.value" nodrop="1"></vde-property>

      <vde-property label="Width" type="range" min="0" step="0.25" max="10"
                    item="axis" property="gridStyle.strokeWidth"
                    ng-model="axis.properties.gridStyle.strokeWidth.value"
                    nodrop="1" style="full"></vde-property>
    </div>
  </div>

  <br clear="all" />
</div>
